﻿<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Morvin - Responsive Bootstrap 5 Admin Dashboard | Docs</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
        <meta content="Themesdesign" name="author" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- Bootstrap Css -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- Icons Css -->
        <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
        <!-- App Css-->
        <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" />

    </head>

    <body data-sidebar="dark">

        <!-- Begin page -->
        <div id="layout-wrapper">

            <header id="page-topbar">
                <div class="navbar-header">
                    <div class="d-flex">
                        <!-- LOGO -->
                        <div class="navbar-brand-box">
                            <a href="index.html" class="logo logo-light">
                                <span class="logo-sm">
                                    <img src="assets/images/logo-sm-light.png" alt="" height="22">
                                </span>
                                <span class="logo-lg">
                                    <img src="assets/images/logo-light.png" alt="" height="20">
                                </span>
                            </a>
                        </div>

                        <button type="button" class="btn btn-sm px-3 font-size-24 header-item waves-effect" id="vertical-menu-btn">
                            <i class="mdi mdi-backburger"></i>
                        </button>

                    </div>

                    <div class="d-flex">

                        <div class="d-inline-block">
                            <h5><span class="badge badge-danger float-right">v1.0.0</span></h5>
                        </div>
            
                    </div>
                </div>
            </header>

            <!-- ========== Left Sidebar Start ========== -->
            <div class="vertical-menu">

                <div data-simplebar class="h-100">

                    <!--- Sidemenu -->
                    <div id="sidebar-menu">
                        <!-- Left Menu Start -->
                        <ul class="metismenu list-unstyled" id="side-menu">
                            <li class="menu-title">Docs</li>

                            <li>
                                <a href="index.html" class="waves-effect">
                                    <i class="mdi mdi-file-document-box-outline"></i>
                                    <span>Getting Started</span>
                                </a>
                            </li>

                            <li>
                                <a href="setup.html" class=" waves-effect">
                                    <i class="mdi mdi-settings-outline"></i>
                                    <span>Setup</span>
                                </a>
                            </li>

                            <li>
                                <a href="plugins.html" class=" waves-effect">
                                    <i class="mdi mdi-apps"></i>
                                    <span>Plugins</span>
                                </a>
                            </li>

                            <li class="menu-title">Layouts</li>

                            <li>
                                <a href="vertical.html" class=" waves-effect">
                                    <i class="mdi mdi-flip-horizontal"></i>
                                    <span>Vertical</span>
                                </a>
                            </li>

                            <li>
                                <a href="horizontal.html" class=" waves-effect">
                                    <i class="mdi mdi-flip-vertical"></i>
                                    <span>Horizontal</span>
                                </a>
                            </li>

                            <li class="menu-title">Themes</li>

                            <li>
                                <a href="dark.html" class=" waves-effect">
                                    <i class="mdi mdi-weather-night"></i>
                                    <span>Dark Version</span>
                                </a>
                            </li>

                            <li>
                                <a href="rtl.html" class=" waves-effect">
                                    <i class="mdi mdi-web"></i>
                                    <span>RTL Version</span>
                                </a>
                            </li>

                            <li class="menu-title">Other</li>

                            <li>
                                <a href="changelog.html" class=" waves-effect">
                                    <i class="mdi mdi-format-list-bulleted"></i>
                                    <span>Changelog</span>
                                </a>
                            </li>

                        </ul>

                    </div>
                    <!-- Sidebar -->
                </div>
            </div>
            <!-- Left Sidebar End -->

            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="main-content">

                <div class="page-content">
                    <div class="container-fluid">

                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box d-flex align-items-center justify-content-between">
                                    <h4 class="mb-0 font-size-18">Setup</h4>

                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">
                                            <li class="breadcrumb-item"><a href="javascript: void(0);">Docs</a></li>
                                            <li class="breadcrumb-item active">Setup</li>
                                        </ol>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>     
                        <!-- end page title -->

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card ">
                                    <div class="card-body">
                                        <div class="p-lg-1">
    
                                            <div class="d-xl-flex">
    
                                                <div class="w-100">
    
                                                    <div id="desc" class="mb-5">
                                                        <h5>Introduction</h5>
                                                        <p>
                                                            We are using
                                                            <a href="https://gulpjs.com/" target="_blank">gulp</a> which
                                                            allows having complete automation for build flow. In case if you
                                                            don't know Gulp then it's easy to use it. Gulp is a toolkit for
                                                            automating painful or time-consuming tasks in the development
                                                            workflow, so you can stop messing around while building any
                                                            project. You can read it more about it <a
                                                                href="https://gulpjs.com/" target="_blank">here</a>.
                                                            Please follow below steps to install and setup all
                                                            prerequisites:
                                                        </p>
                                                    </div>
    
                                                    <div id="prerequisites" class="mb-5">
                                                        <h5 class="mt-4">Prerequisites</h5>
    
                                                        <p>
                                                            Please follow below steps to install and setup all
                                                            prerequisites:
                                                        </p>
    
    
                                                        <ul>
                                                            <li>
                                                                <strong>Yarn</strong>
                                                                <p>
                                                                    Make sure to have the <a
                                                                        href="https://classic.yarnpkg.com/en/"
                                                                        target="_blank">Yarn</a> installed &amp; running
                                                                    in your computer.
                                                                    If you already have installed Yarn on your computer, you
                                                                    can skip this step. We suggest you to use Yarn instead
                                                                    of NPM.</p>
                                                            </li>
                                                            <li>
                                                                <strong>Nodejs</strong>
                                                                <p>
                                                                    Make sure to have the <a href="https://nodejs.org/"
                                                                        target="_blank">Node.js</a> installed &amp; running
                                                                    in your computer.
                                                                    If you already have installed Node on your computer, you
                                                                    can skip this step if your existing node version is
                                                                    greater than 10. </p>
                                                            </li>
    
                                                            <li>
                                                                <strong>Gulp</strong>
    
                                                                <p>Make sure to have the <a href="https://gulpjs.com/"
                                                                        target="_blank">Gulp</a> installed &amp; running in
                                                                    your computer. If you already have installed gulp on run
                                                                    command <code>npm install -g gulp</code> from your
                                                                    terminal.</p>
                                                            </li>
    
                                                            <li>
                                                                <strong>Git</strong>
    
                                                                <p>Make sure to have the <a href="https://git-scm.com/"
                                                                        target="_blank">Git</a> installed globally &amp;
                                                                    running on your computer. If you already have installed
                                                                    git on your computer, you can skip this step.</p>
                                                            </li>
                                                        </ul>
                                                    </div>
    
                                                    <div id="installation">
                                                        <h5 class="mt-4">Installation</h5>
    
                                                        <p>
                                                            To setup the admin theme, follow below-mentioned steps:
                                                        </p>
    
                                                        <ul>
                                                            <li>
                                                                <strong>Install Prerequisites</strong>
                                                                <p>
                                                                    Make sure to have all above prerequisites installed
                                                                    &amp; running on your computer
                                                                </p>
                                                            </li>
    
                                                        </ul>
    
    
                                                        <p class="mt-4">
                                                            After you finished with the above steps, you can run the
                                                            following commands into the terminal / command prompt from the
                                                            root directory of the project to run the project locally or
                                                            build for
                                                            production use:
                                                        </p>
                                                        <table class="table table-bordered m-0">
                                                            <thead>
                                                                <tr>
                                                                    <th style="width: 20%;">
                                                                        <i class="ti-file"></i> Command</th>
                                                                    <th>Description</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td>
                                                                        <code>yarn install</code>
                                                                    </td>
                                                                    <td>
                                                                        This would install all the required dependencies in
                                                                        the <code>node_modules</code> folder.
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <code>gulp</code>
                                                                    </td>
                                                                    <td>
                                                                        Runs the project locally, starts the development
                                                                        server and watches for any changes in your code,
                                                                        including your HTML, javascript, sass, etc. The
                                                                        development server is accessible at <a
                                                                            href='http://localhost:3000'>http://localhost:3000</a>.
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <code>gulp build</code>
                                                                    </td>
                                                                    <td>
                                                                        Generates a <code>/dist</code> directory with all
                                                                        the production files.
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    
                                                    <div id="tips">
                                                        <h5 class="mt-4">Tips</h5>
    
                                                        <p>
                                                            SCSS: We suggest you to do not change any scss files from the assets/scss/custom folders because to get new updates will might be break your SCSS changes if any you have made. We strongly suggest you
                                                            to create new custom.scss file and use that instead of overwrite
                                                            any theme's custom scss files.
                                                        </p>
    
                                                    </div>
                                                </div>
    
                                                
                                            </div>
    
                                        </div> <!-- end padding-->
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                            </div>
                        </div>
                        <!-- end row -->


                    </div> <!-- container-fluid -->
                </div>
                <!-- End Page-content -->

                
                <footer class="footer">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-6">
                                <script>document.write(new Date().getFullYear())</script> © Morvin.
                            </div>
                            <div class="col-sm-6">
                                <div class="text-sm-right d-none d-sm-block">
                                    Crafted with <i class="mdi mdi-heart text-danger"></i> by <a href="http://www.bootstrapmb.com" target="_blank" class="text-muted">Themesdesign</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </footer>
            </div>
            <!-- end main content-->

        </div>
        <!-- END layout-wrapper -->

        <!-- JAVASCRIPT -->
        <script src="assets/libs/jquery/jquery.min.js"></script>
        <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="assets/libs/metismenu/metisMenu.min.js"></script>
        <script src="assets/libs/simplebar/simplebar.min.js"></script>
        <script src="assets/libs/node-waves/waves.min.js"></script>

        <script src="assets/js/app.js"></script>

    </body>
</html>
